{extend name="main"}
{block name="style"}
<style type="text/css">
	.w-100px{width: 100px;}
</style>
{/block}
{block name="body"}
<div class="bg-white p-3">
<el-form :model="form" @submit.native.prevent="submitForm" :rules="rules" ref="form" label-width="120px" :label-position="labelPosition">

  <el-form-item label="类型" prop="type">
    <el-radio-group v-model="form.type" @change="createTitle">
      <el-radio :label="0">满减券[默认]</el-radio>
      <el-radio :label="1">折扣券</el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item label="可使用" prop="alias_type">
  	<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" 
  	@change="handleCheckAllChange">全选</el-checkbox>
  	<el-checkbox-group v-model="form.alias_type" @change="handleCheckedCitiesChange">
	    <el-checkbox :label="v.value" v-for="v in aliasData">{{v.title}}</el-checkbox>
	  </el-checkbox-group>
  </el-form-item>

  <el-form-item label="券名" prop="title">
    <el-input v-model="form.title" class="col-12 col-sm-4 pl-0 pr-0" placeholder="Title" :maxlength="50" show-word-limit></el-input>
  </el-form-item>

  <el-form-item label="叠加" prop="superposition">
    <el-radio-group v-model="form.superposition">
      <el-radio :label="0">不叠加[默认]</el-radio>
      <el-radio :label="1">可叠加</el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item label="套餐限制">
  	<el-radio-group v-model="form.vip_level">
	    <el-radio v-for="(v,index) in vip" :label="v.level" v-if="v.is_company">{{v.title}}</el-radio>
	</el-radio-group>
  </el-form-item>

  <el-form-item label="优惠" prop="price">
  	<div class="flex">
  		<div class="mr-2">满</div>
    	<el-input v-model="form.satisfy_price" class="w-100px"></el-input>
  		<div class="mx-2" v-if="form.type">打</div>
  		<div class="mx-2" v-else>减</div>
    	<el-input-number v-model="form.discount" controls-position="right" :step="1" step-strictly :max="100" :min="1" v-if="form.type"></el-input-number>
    	<el-input v-model="form.price" v-else class="w-100px"></el-input>
    	<div v-if="form.type" class="ml-2"><span v-if="form.discount/10<10">{{form.discount/10}}</span>折</div>
    	<div v-else class="ml-2">元</div>
  	</div>
  </el-form-item>

  <el-form-item label="状态" prop="status">
    <el-radio-group v-model="form.status">
      <el-radio :label="1">上架[默认]</el-radio>
      <el-radio :label="0">下架</el-radio>
    </el-radio-group>
  </el-form-item>

  <el-form-item label="领取数量" prop="limit_sum">
    <el-input-number v-model="form.limit_sum" :step="1" step-strictly :max="99" :min="0"></el-input-number>
    <div class="small">每个账号可领取几次，0，为不限制</div>
  </el-form-item>

  <el-form-item label="可使用时间" prop="use_start_time">
    <el-date-picker
      v-model="form.use_start_time"
      align="right"
      type="datetime"
      format="yyyy-M-d HH:mm:ss"
      value-format="yyyy-M-d HH:mm:ss"
      placeholder="Use Time">
    </el-date-picker>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm('form')">立即保存</el-button>
    <el-button @click="resetForm('form')">重置</el-button>
  </el-form-item>
</el-form>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="alias"}
	var aliasData=[];
	{else/}
	var aliasData={:json_encode($alias,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="vip"}
	var vip=[];
	{else/}
	var vip={:json_encode($vip,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="Find"}
	var is_edit=false;
	var formData={
		type:0,
		alias_type:[],
		title:'',
		price:'',
		discount:100,
		satisfy_price:'',
		vip_level:0,
		superposition:0,
		status:1,
		limit_sum:1,
		use_start_time:'',
	};
	{else/}
	var is_edit=true;
	var formData={:json_encode($Find,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			vip:vip,
			aliasData:aliasData,
			aliasDataIndex:0,
    	checkAll: false,
    	isIndeterminate: false,
			labelPosition:'right',
			form:formData,
			is_edit:is_edit,
		    rules: {
			      title: [
			        { required: true, message: '券名不能为空', trigger: 'blur' }
			      ],
			      type: [
			        { required: true, message: '请选择类型', trigger: 'change' }
			      ],
			      status: [
			        { required: true, message: '请选择状态', trigger: 'change' }
			      ],
		    }
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
    		for (var i in this.aliasData) {
    			this.aliasDataIndex++;
    		}
			this.handleCheckedCitiesChange(this.form.alias_type);
		},
		methods:{
		    handleCheckAllChange(val) {
		    	if(val){
		    		for (var i in this.aliasData) {
			    		this.form.alias_type.push(this.aliasData[i].value);
		    		}
		    	}else{
		    		this.form.alias_type=[];
		    	}
		        this.isIndeterminate = false;
		    	this.createTitle();
		    },
		    handleCheckedCitiesChange(value) {
		        var checkedCount = value.length;
		        this.checkAll = checkedCount === this.aliasDataIndex;
		        this.isIndeterminate = checkedCount > 0 && checkedCount < this.aliasDataIndex;
		    	this.createTitle();
		    },
			createTitle(val){
				var couponType='优惠券';
				if (this.form.type) couponType='折扣券';
				if(this.form.alias_type.length){
					if (this.form.alias_type.length>1) {
						this.form.title='仅可购买部分服务'+couponType;
					}else{
						var alias=this.aliasData[this.form.alias_type[0]];
						this.form.title='仅可购买'+alias.title+'服务'+couponType;
					}
				}else{
					this.form.title='全品类'+couponType;
				}
			},
			submitForm:function(formName) {
				var _this=this;
				var D=_this.form;
				_this.$refs[formName].validate((valid) => {
				  if (valid) {
					const loading = XYBase.openloading();
					$.ajax({
						url:'',
						data:D,
						type:'post',
						dataType:'json',
						success:function(ret){
					        loading.close();
					        if (ret) {
								if(ret.code == 0){
									XYBase.success(ret.msg);
									if(!_this.is_edit){
										_this.resetForm(formName);
									}
								}else{
									XYBase.msg(ret.msg);
								}
					        }else{
				          		XYBase.error(XYBase.config.system_network_error)
					        }
						},
						error:function(err){
					        loading.close();
				          	XYBase.error(XYBase.config.system_network_error)
						}
					});
				  } else {
					XYBase.warning('请先把表单填写完整。');
				    return false;
				  }
				});
			},
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
		}
	});
$(function(){
	reloadWindowSize();
	$(window).resize(function(){
		reloadWindowSize();
	});
});
function reloadWindowSize (argument) {
	var winW=$(window).width();
	if(winW <= 576){
		vm.labelPosition='top';
	}else{
		vm.labelPosition='right';
	}
}
</script>
{/block}